<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html>
<html>
<fmt:bundle basename="text">  
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>国药大屏</title>
        <link href="<%=basePath%>/images/favicon.ico" rel="shortcut icon" />
        <link rel="stylesheet" href="<%=basePath%>/login/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="<%=basePath%>/dist/css/AdminLTE.min.css">
        <link rel="stylesheet" href="<%=basePath%>/login/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="<%=basePath%>/login/css/form-elements.css">
        <link rel="stylesheet" href="<%=basePath%>/login/css/style.css">
        <link rel="stylesheet" href="<%=basePath%>/plugins/flavr/flavr.css">
        <link rel="stylesheet" href="<%=basePath%>/plugins/iziModal/css/iziModal.min.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%=basePath%>/login/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%=basePath%>/login/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%=basePath%>/login/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="<%=basePath%>/login/ico/apple-touch-icon-57-precomposed.png">
    </head>
    <body>

        <!-- Top content -->
        <div class="top-content">
			
			<!-- 发送 验证码model -->
			<div id="retrieve-code" style="display:none">
				<div class="box-body" style="margin:5px 0 -10px 0">
					<div class="login-box-body">
						<div class="form-group has-feedback">
							<input type="text" class="form-control" placeholder="请输入您的手机号码" id="phone" name="phone">
						</div>
						<div class="form-group has-feedback">
							<input type="text" class="form-control" placeholder="请输入验证码" id="code" name="code">
						</div>
						<div class="row">
							<div class="col-xs-8">
								<div class="checkbox icheck">
									<label class="">
										<div class="icheckbox_square-blue" aria-checked="false" aria-disabled="false" style="position: relative;">
											<input type="checkbox" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
											<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
											</ins>
										</div>
									</label>
								</div>
							</div>
							<div class="col-xs-4">
								<input type="button" id="btn" class="btn btn-primary btn-block btn-flat" value="获取验证码"/>
							</div>
						</div>
						<div class="social-auth-links text-center">
							<button type="button" class="btn btn-primary btn-block btn-flat" onclick="openPasswordModel();">确定</button>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 修改密码model -->
			<div id="retrieve-password" style="display:none">
				<div class="box-body" style="margin:5px 0 -10px 0">
					<div class="login-box-body">
						<div class="form-group has-feedback hide">
							<input type="text" class="form-control" id="phoneHide">
						</div>
						<div class="form-group has-feedback">
							<input type="password" class="form-control" placeholder="请输入您的新密码" id="newPassword">
						</div>
						<div class="form-group has-feedback">
							<input type="password" class="form-control" placeholder="请再次输入密码" id="oldPassword">
						</div>
					</div>
				</div>
				<div class="box-footer text-right">
					<button data-iziModal-close class="btn btn-default">取消</button>
					<button type="button" class="btn bg-aqua" data-loading-text="保存中..." id="save" onclick="updatePassword()">保存</button>
				</div>
			</div>
				

            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1> <%--<img src="images/tomp_logo.png" style="margin-right: 15px;margin-top: -5px">--%>
                           		国药大屏
								<%--医疗设备管理平台--%>
                            </h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                            <div class="form-top">
                                <div class="form-top-left">
                                    <h3>登录</h3>
                                    <p>输入账号登录</p><!-- 手机号密码登录 -->
                            		
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-key"></i>
                        		</div>
                            </div>
                            <div class="form-bottom">
			                    <form id="form" role="form" action="login" method="post" class="login-form">
			                    	<div class="form-group">
			                    		<label class="sr-only" for="username">登录</label>
			                        	<input type="text" name="username" placeholder="请输入帐号" class="form-username form-control" id="username" value="${username}">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="password">密码</label>
			                        	<input type="password" name="password" placeholder="密码" class="form-password form-control" id="password">
			                        </div>
			                        <%-- <p class="text-danger">${param.msg}</p> --%>
			                        <p class="text-danger">${msg}</p>
			                        <p>
			                        <button type="submit" class="btn">登录</button>
			                    </form>
			                    <a href="javascript:openCodeModel();" style="position: relative; left: 420px; top: 0px;" >忘记密码？</a>
		                    </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Javascript -->
        <script src="<%=basePath%>/login/js/jquery-1.11.1.min.js"></script>
        <script src="<%=basePath%>/login/bootstrap/js/bootstrap.min.js"></script>
        <script src="<%=basePath%>/login/js/jquery.backstretch.min.js"></script>
        <script src="<%=basePath%>/login/js/scripts.js"></script>
        <script src="<%=basePath%>/plugins/flavr/flavr.min.js"></script>
        <script src="<%=basePath%>/plugins/iziModal/js/iziModal.min.js"></script>
        
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->
    </body>
    <script type="text/javascript">
		// 发送验证码model
		$("#retrieve-code").iziModal({
			title:"找回密码",
			headerColor: '#00c0ef',
			theme: '',  // light
			attached: '', // bottom, top
			icon: null,
			iconText: null,
			iconColor: '',
			rtl: false,
			width: 600,
			padding: 0,
			radius: 3,
			zindex: 1040,
			iframe: false,
			iframeHeight: 400,
			iframeURL: null,
			focusInput: false,
			group: '',
			loop: false,
			navigateCaption: true,
			bodyOverflow:false,
			navigateArrows: true, // closeToModal, closeScreenEdge
			history: false,
			restoreDefaultContent: false,
			autoOpen: false, // Boolean, Number
			bodyOverflow: false,
			fullscreen: true,
			openFullscreen: false,
			closeOnEscape: true,
			overlay: true,
			overlayClose: false,
			overlayColor: 'rgba(0, 0, 0, 0.4)',
			timeout: false,
			timeoutProgressbar: false,
			pauseOnHover: false,
			timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
			transitionIn: 'comingIn',
			transitionOut: 'comingOut',
			transitionInOverlay: 'fadeIn',
			transitionOutOverlay: 'fadeOut',
			onFullscreen: function(){},
			onResize: function(){},
			onOpening: function(){},
			onOpened: function(){},
			onClosing: function(){},
			onClosed: function(){
				$("#phone").val("");
				$("#code").val("");
			}
		});
		
		
		// 找回密码model
		$("#retrieve-password").iziModal({
			title:"找回密码",
			headerColor: '#00c0ef',
			theme: '',  // light
			attached: '', // bottom, top
			icon: null,
			iconText: null,
			iconColor: '',
			rtl: false,
			width: 600,
			padding: 0,
			radius: 3,
			zindex: 1040,
			iframe: false,
			iframeHeight: 400,
			iframeURL: null,
			focusInput: false,
			group: '',
			loop: false,
			navigateCaption: true,
			bodyOverflow:false,
			navigateArrows: true, // closeToModal, closeScreenEdge
			history: false,
			restoreDefaultContent: false,
			autoOpen: false, // Boolean, Number
			bodyOverflow: false,
			fullscreen: true,
			openFullscreen: false,
			closeOnEscape: true,
			overlay: true,
			overlayClose: false,
			overlayColor: 'rgba(0, 0, 0, 0.4)',
			timeout: false,
			timeoutProgressbar: false,
			pauseOnHover: false,
			timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
			transitionIn: 'comingIn',
			transitionOut: 'comingOut',
			transitionInOverlay: 'fadeIn',
			transitionOutOverlay: 'fadeOut',
			onFullscreen: function(){},
			onResize: function(){},
			onOpening: function(){},
			onOpened: function(){},
			onClosing: function(){},
			onClosed: function(){
				$("#phoneHide").val("");
				$("#newPassword").val("");
				$("#oldPassword").val("");
			}
		});
		
		// 点击忘记密码弹出发送验证码model框
		function openCodeModel(){
			$("#retrieve-code").iziModal('open');
		}
		
		// 验证码倒计时60秒
		var wait=60;
		function sendCode(obj) {
			  if (wait == 0) {
			  obj.removeAttribute("disabled");
			  obj.value="重新发送";
			  wait = 60;
		} else {
			   obj.setAttribute("disabled", true);
			   obj.value="正在发送(" + wait + ")";
			   wait--;
			   setTimeout(function() {
			   sendCode(obj)
			   },
			   1000)
			}
		}
		
		// 倒计时
		$("#btn").click(function(){
			var phone = $("#phone").val();	// 获取手机号码
			var partten = /^1[34578]\d{9}$/;
			// 验证手机号码
			if(phone == null || phone ==""){
				new $.flavr({content:"请输入手机号码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else if(!partten.test(phone)){
				new $.flavr({content:"手机号码格式有误",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else{
				var obj = this;
				// 请求调用验证码
				$.ajax({
					url:'<%=basePath%>/user/sendCode',
					type:'POST',
					data:{"mobile":phone},	// 参数
					async : false, 	//默认为true 异步   
					success:function(data){
						try {
							if(data.ret == 200){
								sendCode(obj);		// 开始计时
							}else {
								new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
							}
						} catch (error) {
							new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
						}
					},
					failure : function() {
						new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'操作失败',style:'danger',action:function(){}}]});
					}
				});
			}
		});
		
		// 点击确认后提交验证码校验成功后弹出修改 密码Model
		function openPasswordModel(){
			var phone = $("#phone").val();	// 获取手机号码
			var partten = /^1[34578]\d{9}$/;
			var code = $("#code").val();	// 获取验证码
			if(phone == null || phone ==""){
				new $.flavr({content:"请输入手机号码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else if(!partten.test(phone)){
				new $.flavr({content:"手机号码格式有误",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else if(code == null || code == ""){
				new $.flavr({content:"请输入验证码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else{
				// 请求校验验证码
				$.ajax({
					url:'<%=basePath%>/user/checkCode',
					type:'POST',
					data:{"phone":phone,"code":code},	// 参数
					async : false, 	//默认为true 异步   
					success:function(data){
						try {
							if (data.ret == 200) {
								$("#retrieve-code").iziModal('close');
								$("#retrieve-password").iziModal('open');
								$("#phoneHide").val(phone);	// 赋值隐藏域手机号码
							}else{
								new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
							}
						} catch (error) {
							new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
						}
					},
					failure : function() {
						new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'操作失败',style:'danger',action:function(){}}]});
					}
				});
			}
		}
		
		// 找回密码
		function updatePassword(){
			var phone = $("#phoneHide").val();	// 获取手机号码
			var newPassword = $("#newPassword").val();	// 获取新密码
			var oldPassword = $("#oldPassword").val();	// 获取旧密码
			if(phone == null || phone ==""){
				new $.flavr({content:"手机号码未获取到",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else if(newPassword == null || newPassword ==""){
				new $.flavr({content:"请输入新密码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else if(newPassword.length < 6 || newPassword.length > 12){
				new $.flavr({content:"密码位数请控制在6~12位之间",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else if(newPassword != oldPassword){
				new $.flavr({content:"两次密码输入不一致",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
			}else{
				// 找回密码
				$.ajax({
					url:'<%=basePath%>/user/updatePasswordByPhone',
					type:'POST',
					data:{"phone":phone,"password":newPassword},	// 参数
					async : false, 	//默认为true 异步   
					success:function(data){
						try {
							if (data.ret == 1) {
								new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'success',action:function(){}}]});
								$("#retrieve-password").iziModal('close');
							}else{
								new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
							}
						} catch (error) {
							new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
						}
					},
					failure : function() {
						new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'操作失败',style:'danger',action:function(){}}]});
					}
				});
			}
		}
	</script>
</fmt:bundle> 
</html>